<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 头部 -->

        <TreeTools :tree-node="company" :is-show-root="true" @addDepts="addDepts" />
        <!--树形结构内容  这里的props和我们之前学习的父传子 的props没关系-->
        <el-tree v-loading="loading" :data="departs" :props="defaultProps" :default-expand-all="true" empty-text="数据加载中...">
          <!-- el-tree 相当于一个循环 对传入的departs数组对象进行循环 -->
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="{ data }" 接收传递给插槽的数据   data 每个节点的数据对象 这里可以用 {{ data }} 在标签中查看下结构出来的data数据-->
          <TreeTools slot-scope="{data}" :tree-node="data" @delDepts="initGetDeparts" @addDepts="addDepts" @editDepts="editDepts" />
        </el-tree>
      </el-card>
    </div>
    <!-- 添加部门的弹出框组件 -->
    <AddDepartment :is-show-dialog.sync="isShowAddDialog" :tree-node="currentNode" :title="'新增部门'" @updateDepts="initGetDeparts" />
    <!-- 编辑部门的弹出框组件 -->
    <AddDepartment ref="editDepts" :title="'编辑部门'" :is-show-dialog.sync="isShowEditDialog" :tree-node="currentNode" @updateDepts="initGetDeparts" />
  </div>
</template>

<script>
import TreeTools from './components/TreeTools'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import AddDepartment from './components/AddDepartment'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDepartment
  },
  data() {
    return {
      company: {}, // 头部的数据结构
      departs: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容 从label改为name
      },
      // isShowDialog: false, // 默认不显示弹层(添加部门的弹层)
      isShowAddDialog: false,
      isShowEditDialog: false,
      currentNode: null, // 记录当前点击的 部门节点
      loading: false
    }
  },
  created() {
    this.initGetDeparts()
  },
  methods: {
    // 初始化获取组织架构请求的函数
    async initGetDeparts() {
      this.loading = true
      const res = await getDepartments()
      // console.log(res)
      this.company = { name: res.companyName, manager: res.companyManage || '负责人', id: '' }
      this.departs = tranListToTreeData(res.depts, '')
      this.loading = false
    },
    // 监听TreeTools中触发的添加子部门的事件 并显示弹层
    addDepts(node) {
      // console.log(node)
      // this.isShowDialog = true
      this.isShowAddDialog = true
      // 保存点击的当前部门信息
      this.currentNode = node
    },
    editDepts(node) {
      // 打开编辑部门弹框
      // this.isShowDialog = true
      this.isShowEditDialog = true
      // 保存当前点击的要编辑的部门信息
      this.currentNode = node
      // console.log(node)
      // 获取编辑组件实例 调用子组件中的方法发起请求
      // console.log(this.$refs.editDepts)
      this.$refs.editDepts.initGetDepartmentsById(node.id)
    }
  }
}
</script>

<style scoped>
.box-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
